<!DOCTYPE HTML>
<html>
<head>
    <title>站外商品管理</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
    <script src="/scripts/jquery.min.js"></script>
    <link rel="stylesheet" href="/scripts/miniui/themes/default/miniui.css">
    <link rel="stylesheet" href="/scripts/miniui/themes/icons.css">
    <link rel="stylesheet" href="/editor/common.css">
    <link rel="stylesheet" href="/scripts/miniui/themes/bootstrap/skin.css">
    <script src="/scripts/miniui/miniui.js"></script>
</head>
<body style="padding: 0;width: 100%;height: 100%">
<div style="width:100%;height:97%;">
    <div id="outImg">
        <img id="imgId" src="" alt="" onclick="smallImg()">
    </div>
    <div style="padding: 5px">
        <span>商品名称：</span><input class="mini-textbox" id="sourceGoodsName"  type="text" />
        <span>商品状态：</span><input class="mini-combobox" id="status"  data="goodsStatus" />
        <span>商品来源：</span><input id="goodsSourceId" class="mini-combobox" style="width:155px;" data="goodsSourceData" value="-1"/>
        <span>商品分类：</span><input id="btnSelectGoodsType" name="btnSelectGoodsType" class="mini-buttonedit" style="width:155px;" onbuttonclick="onButtonSelectGoodsType"/>
        <input id="pid" name="pid" class="mini-textbox" required="true" type="number" style="width:155px;display: none;" readonly="readonly"/>
        <a class="mini-button" iconCls="icon-search" onclick="search()">查找</a>
    </div>
    <div style="width:99%;">
        <div class="mini-toolbar" style="border-bottom:0;padding:5px;">
            <a class="mini-button" iconCls="icon-add" onclick="importExternalGoodsData">导入</a>
            <a class="mini-button" iconCls="icon-remove" onclick="remove">删除</a>
        </div>
    </div>
    <div id="datagrid1" class="mini-datagrid" style="width:99%;height: 82%;"
         url="/getdata/getExternalGoodsInfo" idField="id" allowResize="true"
         sizeList="[20,30,50,100]" pageSize="30">
        <div property="columns">
            <div type="checkcolumn" ></div>
            <div field="objectId" width="120" headerAlign="center" allowSort="true" >商品Id</div>
            <div field="goodsSource" align="center" width="60" headerAlign="center" allowSort="true" >商品来源</div>
            <div field="sourceGoodsDetailUrl" renderer="goodsDetailRenderer" align="center" width="60" headerAlign="center" allowSort="true" >商品详情</div>
            <div field="sourceGoodsId"  width="70" align="center" headerAlign="center" renderer="onGenderRenderer" allowSort="true" >源商品ID</div>
            <div field="goodsType"  width="80" align="center" headerAlign="center" allowSort="true" >商品分类</div>
            <div field="sourceGoodsName" align="center" width="80" headerAlign="center" allowSort="true">商品名称</div>
            <div field="sourceGoodsIcon" align="center" width="50" headerAlign="center" allowSort="true">商品主图</div>
            <div field="sourceShopName"  align="center" width="60" headerAlign="center" allowSort="true">店铺名称</div>
            <div field="status" renderer="statusRenderer" align="center" headerAlign="center" width="50" allowSort="true" >状态</div>
            <div field="price" align="center" headerAlign="center" width="50" allowSort="true" >价格</div>
            <div field="SalesVolumeMonth" align="center" width="50" headerAlign="center" allowSort="true">月销量</div>
            <div field="commissionRatio" align="center" headerAlign="center" width="60" allowSort="true">佣金比率</div>
            <div field="commission" align="center" headerAlign="center" width="50" allowSort="true" >佣金</div>
            <div field="sellerServices" align="center" headerAlign="center" width="80" allowSort="true" >客服</div>
            <div field="shareUrl" align="center" headerAlign="center" width="150" allowSort="true" >推广链接</div>
            <div field="createdAt" width="100" align="center" headerAlign="center"  allowSort="true">创建日期</div>
            <div field="updatedAt" width="100" align="center" headerAlign="center"  allowSort="true">更新日期</div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
  var goodsStatus = [{ id: 2, text: '全部'},{ id: 0, text: '正常'}, {id:-1,text: '删除'}];
  var goodsSourceData = [{ id: -1, text:'全部'},{ id:0 , text:'淘宝' },{id:1,text:'京东'}];
  var flag = 1;
  mini.parse();
  var grid = mini.get("datagrid1");
  grid.load({'status':0});
  grid.on("drawcell", function (e) {
    var  value = e.value;
    column = e.column;
    if (column.field == "sourceGoodsIcon") {
      if(value) {
        e.cellHtml = '<img class="bigImg" onclick="bigImg()" src="' + value + '" width="30" height="30" alt="图片">';
      }else{
        e.cellHtml = '<img class="bigImg" onclick="bigImg()"  src="http://7xiuo5.com1.z0.glb.clouddn.com/fgImage.png?imageMogr2/auto-orient/thumbnail/!100x100r/gravity/Center/crop/100x100/quality/80/auto-orient" width="30" height="30" alt="图片">';
      }
    }
  });

  function search() {
    let sourceGoodsName = mini.get("sourceGoodsName").getValue();
    let status = mini.get("status").getValue();
    let goodsSourceValue = mini.get("goodsSourceId").getValue();
    let goodsSource1 = ''
    if (goodsSourceValue == 0){
      goodsSource1 = '淘宝'
    } else if (goodsSourceValue == 1) {
      goodsSource1 = '京东'
    } else {
      goodsSource1 = ''
    }
    let goodsTypeOId = mini.get("btnSelectGoodsType").getValue();
    let goodsTypePId = mini.get("pid").getValue();
    grid.load({
      sourceGoodsName:sourceGoodsName,
      status:status,
      goodsSource:goodsSource1,
      goodsTypeOId:goodsTypeOId,
      goodsTypePId:goodsTypePId
    });
  }
  $("#title,#objectId").bind("keydown", function (e) {
    if (e.keyCode == 13) {
      search();
    }
  });
  function remove() {
    let row = grid.getSelected();
    if (row) {
      $.ajax({
        url:"/getdata/removeExternalGoods",
        type:'POST',
        data:{
          objectId:row.objectId,
          status:-1
        },
        success:function (result) {
          if (result){
            grid.reload();
          } else {
            console.log('删除失败')
          }
        }
      });
    } else {
      alert("请选中一条记录");
    }
  }
  function bigImg() {
    var row = grid.getSelected();
    if (row) {
      if(flag==1) {
        var path = row.sourceGoodsIcon;
        $("#imgId").attr('src', path);
        $("#outImg").css('display','block');
      }
    }
  }
  function smallImg() {
    $("#outImg").css('display','none');
  }

  function statusRenderer(e) {
    var value = e.value;
    if (value==-1) {
      return (value, '删除')
    }else if(value==0){
      return (value, '正常')
    }else {
      return (value, '未知')
    }
  }
  function goodsDetailRenderer(e) {
    var value = e.value;
    return '<a href="'+value+'" target="view_window">详情</a>'
  }

  function importExternalGoodsData(){
    mini.open({
      url: "/editor/externalGoodsImport",
      title: "导入商品信息", width: 400, height: 260,
      ondestroy: function (action) {
        grid.reload();
      }
    });
  }
  function onButtonSelectGoodsType(e) {
    var btnSelectGoodsType = this;
    mini.open({
      url: "/getdata/shopIntergationSelectGoodsType",
      showMaxButton: false,
      title: "选择商品分类",
      width: 350,
      height: 350,
      ondestroy: function (action) {
        if (action == "ok") {
          var iframe = this.getIFrameEl();
          var data = iframe.contentWindow.GetData();
          data = mini.clone(data);
          if (data) {
            // console.log(data)
            btnSelectGoodsType.setValue(data.id);
            btnSelectGoodsType.setText(data.text);
            mini.get('pid').setValue(data.pid);
          }
        }
      }
    });
  }
</script>
</html>